<template>
  <div>
    <ul>
      <li v-for="(item, index) in personArr" :key="index">{{ item }}</li>
    </ul>
    <div>{{ person }}</div>
    <button @click="addData">添加数据</button>
    <button @click="changeData">修改数组的值</button>
  </div>
</template>

<script>
import router from '@/router'

export default {
  name: 'VideoPage',
  data () {
    return {
      personArr: ['张三', '李四', '王五', '赵六'],
      person: {
        name: '张三',
        age: 18,
        sex: '男'
      }
    }
  },
  created () {
    this.personArr.push('6666')
    console.log(router.currentRoute.fullPath)
    console.log(router.currentRoute.path)
  },
  methods: {
    addData () {
      // 不具备响应式
      // this.person.hobby = '踢足球'

      // 具备响应式  Vue.$set()
      // this.$set(this.person, 'hobby', '踢足球')

      this.person = { ...this.person, hobby: '踢足球' }
      console.log(this.person)
    },
    changeData () {
      // this.personArr[2] = '刘德华'
      // this.$set(this.personArr, 1, '刘德华')
      // Vue中重写了数组的一系列方法, 比如(pop, push, unshift, splice...)
      // 如果用这些方法去操作数组的数据, 那边数据都是响应式的
      // 如果用下标的方式去操作数组中的数据, 则不是响应式的

      // this.personArr.push('666888999')
      // this.personArr[5] = '哈哈哈哈'
      this.$set(this.personArr, 5, '刘德华')
      console.log(this.personArr)
    }
  }
}
</script>

<style scoped></style>
